<template>
  <div class="todo-list-container">
    <ul v-if="tasks.length" class="todo-list">
      <TodoItem
        v-for="task in tasks"
        :key="task.id"
        :task="task"
        @toggle-task="toggleTask"
        @delete-task="deleteTask"
      />
    </ul>
    <div v-else class="empty-list">
      暂无待办事项，快来添加新任务吧！
    </div>
  </div>
</template>

<script setup>
import TodoItem from './TodoItem.vue'

const props = defineProps({
  tasks: {
    type: Array,
    default: () => []
  }
})

const emit = defineEmits(['toggle-task', 'delete-task'])

function toggleTask(id) {
  emit('toggle-task', id)
}

function deleteTask(id) {
  emit('delete-task', id)
}
</script>

<style scoped>
.todo-list-container {
  margin-bottom: 20px;
}

.todo-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.empty-list {
  text-align: center;
  padding: 20px;
  background: white;
  border-radius: 4px;
  color: #aaa;
  font-style: italic;
}
</style> 